<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>vex – Beautiful, functional, modal dialogs in Javascript</title>
        <meta name="description" content="vex is a Javascript and CSS library for creating beautiful and functional modal dialogs. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
        <link rel="icon" href="http://static.hubspot.com/favicon.ico">
        <script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="/vex/dist/js/vex.combined.js"></script>
        <link href="/vex/dist/css/vex.css" rel="stylesheet" />
        <link href="/vex/dist/css/vex-theme-default.css" rel="stylesheet" />
        <link href="/vex/dist/css/vex-theme-os.css" rel="stylesheet" />
        <link href="/vex/dist/css/vex-theme-plain.css" rel="stylesheet" />
        <link href="/vex/dist/css/vex-theme-flat-attack.css" rel="stylesheet" />
        <link href="/vex/dist/css/vex-theme-wireframe.css" rel="stylesheet" />
    </head>
    <body>
        <style>
            html, body {
                overflow: hidden;
                margin: 0;
            }
            body.demo-start .page, body.page-intro .page {
                opacity: 0;
                z-index: 0;
            }

            .page {
                color: #000;
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                -webkit-transition: opacity 1s;
                -moz-transition: opacity 1s;
                -o-transition: opacity 1s;
                transition: opacity 1s;
                text-align: center;
                margin: auto;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: fixed;
                width: 40em;
                max-width: 100%;
                height: 36em;
                z-index: 50;
            }
            .page h1 {
                font-size: 110px;
                font-weight: 100;
                margin: 40px 0;
            }
            .page h2 {
                font-size: 2.5em;
                font-weight: 100;
                margin: 1em 0;
            }
            .page p {
                margin: 1em 0;
            }
            .page a {
                display: inline-block;
                border: 2px solid #000;
                color: #000;
                padding: 1em 1.25em;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 3px;
                text-decoration: none;
                cursor: pointer;
                width: 150px;
                line-height: 1.3em;
            }
            .page a.demo-link {
                margin-left: 20px;
                border-color: transparent;
                background: #000;
                color: #fff;
                font-weight: 700;
            }


            .stack {
                color: #000;
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                -webkit-transition: opacity 1s;
                -moz-transition: opacity 1s;
                -o-transition: opacity 1s;
                transition: opacity 1s;
                text-align: center;
                -webkit-perspective: 700px;
                -webkit-perspective-origin: 320px 700px;
                margin: 0 auto;
                height: 850px;
                width: 640px;
                max-width: 100%;
                margin: auto;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: absolute;
                z-index: 9999;
                pointer-events: none;
            }

            @-moz-document url-prefix() {
                .stack {
                    height: 640px;
                }
            }

            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo {
                overflow: hidden;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content {
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                font-weight: 400;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-dialog-form .vex-dialog-buttons {
                padding-top: 1em;
                margin-bottom: -2em;
                margin-left: -2em;
                margin-right: -1em;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h1 {
                font-weight: 100;
                font-size: 60px;
                line-height: 1.2em;
                margin: 0;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h2 {
                font-weight: 100;
                font-size: 40px;
                line-height: 1.2em;
                margin: 0;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h2 u {
                text-decoration: none;
                font-weight: 300;
            }
            .vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                font-size: 2em;
                font-weight: 300;
            }

            .vex.vex-theme-stack-demo {
                overflow: hidden;
            }
            .vex.vex-theme-stack-demo.vex-theme-os .vex-dialog-message {
                padding: 1em;
            }
            .vex.vex-theme-stack-demo.vex-theme-wireframe .vex-overlay, .vex.vex-theme-stack-demo.vex-theme-os .vex-overlay {
                display: none;
            }
            .vex.vex-theme-stack-demo.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-overlay {
                display: block;
                background: #34b989;
                top: 80px;
                bottom: 270px;
            }
            .vex.vex-theme-stack-demo .vex-content {
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                font-weight: 400;
                width: 600px;
            }
            .vex.vex-theme-stack-demo .vex-dialog-message {
                padding-top: 1em;
                text-align: left;
                height: 320px;
            }
            .vex.vex-theme-stack-demo .vex-dialog-message h1 {
                line-height: 1.3em;
            }
            .vex.vex-theme-stack-demo.vex-closing {
                -webkit-transform: translate3d(0px, 200px, 200px);
            }

            .stack > .vex {
                pointer-events: all;
                -webkit-transition: -webkit-transform 0.7s;
            }

            .stack > .v0 { -webkit-transform: translate3d(0px, 0px, 0px); }
            .stack > .v1 { -webkit-transform: translate3d(0px, -200px, -200px); }
            .stack > .v2 { -webkit-transform: translate3d(0px, -400px, -400px); }
            .stack > .v3 { -webkit-transform: translate3d(0px, -600px, -600px); }
            .stack > .v4 { -webkit-transform: translate3d(0px, -800px, -800px); }

            @media (max-width: 568px) {
                .stack {
                    display: none;
                }

                body.demo-start .page, body.page-intro .page {
                    opacity: 1;
                }

                .page h2 {
                    font-size: 20px;
                }

                .page a {
                    width: 100px;
                    font-size: 10px;
                }

                .page h1 {
                    padding-top: .5em;
                }

                .vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
                    animation: none;
                    -webkit-animation: none;
                    -moz-animation: none;
                    -ms-animation: none;
                    -o-animation: none;
                }
            }

            .vex.example {
                z-index: 9999;
            }

            .examples a {
                background: #3288e6;
                color: #fff;
                padding: 8px 18px 6px;
                cursor: pointer;
                margin: 0 20px 20px 0;
                border-radius: 3px;
                display: inline-block;
            }
            .themes a {
                background: #34b989;
                color: #fff;
                padding: 8px 18px 6px;
                cursor: pointer;
                margin: 0 20px 20px 0;
                display: inline-block;
            }
            .themes a.selected {
                background: #2B755B;
            }

            .button {
                text-decoration: none;
                background: #000;
                color: #fff;
                padding: 8px 18px 6px;
                cursor: pointer;
                margin: 0 20px 20px 0;
                display: inline-block;
            }
        </style>
        <script>
            var demo = {};

            demo.className = 'vex-theme-flat-attack vex-theme-flat-attack-demo';
            vex.defaultOptions.className = 'vex-theme-flat-attack';
            vex.dialog.defaultOptions.showCloseButton = true;

            demo.loadInitialDialogs = function(){
                $('body').addClass('page-intro');

                demo.initialDialogsClassName = 'vex-theme-wireframe vex-theme-stack-demo'

                for (var i = 4; i > -1; i--) {
                    vex.dialog.alert({
                        appendLocation: '.stack',
                        unsafeMessage: $('.stack-templates > div:nth-child(' + (i + 1) + ')').html(),
                        className: demo.initialDialogsClassName,
                        buttons: [
                            $.extend({}, vex.dialog.buttons.YES, { text: '►' })
                        ],
                        callback: function(value) {
                            setTimeout(function(){
                                demo.advanceDemoDialogs();
                            }, 0);
                        }
                    });
                }

                demo.advanceDemoDialogs();
            };

            demo.advanceDemoDialogs = function() {
                var $remaining = $('.stack > .vex:not(".vex-closing")');

                $('.stack').show();

                $.each($remaining.removeClass('v0 v1 v2 v3 v4').toArray().reverse(), function(i, item){
                    $(item).addClass('v' + i);
                });

                $('.stack > .v0:not(".vex-closing") button[type="submit"]').focus();

                if ($remaining.length === 3) {
                    $('.vex:not(".vex-closing")').removeClass('vex-theme-wireframe').addClass('vex-theme-os');
                    var examples = {
                        alert: function() {
                            vex.dialog.alert({ className: 'vex-theme-os example', message: 'This is an alert.' });
                        },
                        confirm: function() {
                            vex.dialog.confirm({ className: 'vex-theme-os example', message: 'Confirm this for me.', callback: function(){} });
                        },
                        prompt: function() {
                            vex.dialog.prompt({ className: 'vex-theme-os example', message: 'Prompt:', callback: function(){} });
                        },
                        login: function() {
                            vex.dialog.open({
                                className: 'vex-theme-os example',
                                message: 'Enter your username and password:',
                                input: '' +
                                    '<input name="username" type="text" placeholder="Username" required />' +
                                    '<input name="password" type="password" placeholder="Password" required />' +
                                '',
                                buttons: [
                                    $.extend({}, vex.dialog.buttons.YES, { text: 'Login' }),
                                    $.extend({}, vex.dialog.buttons.NO, { text: 'Back' })
                                ],
                                callback: function (data) {
                                    if (console && console.log) {
                                        console.log('Username: ' + data.username + ', Password: ' + data.password);
                                    }
                                }
                            });
                        }
                    };
                    $('.vex:not(".vex-closing")').find('[data-example]').each(function(){
                        $(this).click(function(){
                            examples[$(this).data('example')]();
                        });
                    });
                }

                if ($remaining.length === 2) {
                    $('.vex:not(".vex-closing")').removeClass('vex-theme-os').addClass('vex-theme-wireframe');
                    $('.vex.v0:not(".vex-closing")').removeClass('vex-theme-wireframe').addClass('vex-theme-flat-attack vex-theme-flat-attack-green');
                }

                if ($remaining.length === 0) {
                    $('body').removeClass('page-intro');
                    setTimeout(function(){
                        $('.stack').hide();
                    }, 600);
                }
            }
        </script>
        <div class="page">
            <h1>vex</h1>
            <h2>Dialogs for the 21st century.</h2>
            <p>
                <a href="http://github.com/hubspot/vex">★ On Github</a>
                <a class="demo-link">Demo</a>
            </p>
        </div>
        <div class="stack-templates" style="display: none">
            <div>
                <h1>Tired of having no control over your dialogs?</h1>
                <div class="reveal">
                    <p>With vex, you can customize everything:</p>
                    <ul>
                        <li>Styling of all UI elements</li>
                        <li>Themes</li>
                        <li>Behaviors and timing</li>
                        <li>Animations and effects</li>
                    </ul>
                    <p>All options can be configured for all dialogs<br/>or on a per-dialog basis.</p>
                </div>
            </div>
            <div>
                <h1>When opening a vex, you can assign your own class names to everything.</h1>
                <div class="reveal">
                    <p>This dialog is using the "Wireframe" theme by simply passing the option <code>cssClass: "vex-theme-wireframe"</code>.</p>
                    <p>Click the arrow to see the "Operating System" theme.</p>
                </div>
            </div>
            <div>
                <h1>Operating System Theme — Examples</h1>
                <div class="reveal">
                    <p>This theme is great when using vex to replace <code>alert</code>, <code>confirm</code>, and <code>prompt</code>.</p>
                    <p class="examples">
                        <a data-example="alert">Alert</a>
                        <a data-example="confirm">Confirm</a>
                        <a data-example="prompt">Prompt</a>
                        <a data-example="login">Login</a>
                    </p>
                </div>
            </div>
            <div>
                <h1>Need to customize animations, overlay styles, and more?</h1>
                <div class="reveal">
                    <h2>vex has you covered.</h2>
                </div>
            </div>
            <div>
                <h1>All of this under 7kb with a simple and elegant API.</h1>
                <div class="reveal">
                    <p>Help us spread the word:</p>
                    <a class="button" href="http://github.com/hubspot/vex" target="_blank">Star vex on GitHub</a>
                    <a class="button" href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fgithub.hubspot.com%2Fvex%2Fdocs%2Fwelcome&text=Check%20out%20vex%2C%20a%20modern%20UI%20library%20for%20creating%20beautiful%20and%20functional%20dialogs.&tw_p=tweetbutton&url=http%3A%2F%2Fgithub.hubspot.com%2Fvex&via=HubSpotDev" target="_blank">Tweet vex</a>
                </div>
            </div>
        </div>
        <style>
            .reveal {
                -webkit-transition: opacity 1s 0.3s;
                -moz-transition: opacity 1s 0.3s;
                -o-transition: opacity 1s 0.3s;
                transition: opacity 1s 0.3s;
                opacity: 0;
            }
            .vex.v0 .reveal {
                opacity: 1;
            }
        </style>
        <div class="stack"></div>
        <script>
            $('.demo-link').click(function(){
                if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || $(window).width() <= 568) {
                    vex.dialog.alert({
                        className: 'vex-theme-default',
                        message: 'This is a vex dialog.'
                    });
                } else {
                    demo.loadInitialDialogs();
                }
            });
        </script>

        <style>
            #retweet_button {
                position: fixed;
                bottom: 30px;
                left: 50%;
                width: 100px;
                margin-left: -90px;
                -webkit-filter: grayscale(1) contrast(1.3);
                -webkit-transform: translateZ(0);
            }
            #retweet_button:hover {
                -webkit-filter: none;
            }

            credits {
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                position: fixed;
                bottom: 35px;
                left: 50%;
                width: 130px;
                margin-left: 20px;
                font-size: 13px;
                color: #aaa;
            }

            credits a, credits a:link, credits a:visited {
                color: #aaa;
                text-decoration: none;
            }

            credits a:hover {
                text-decoration: underline;
                color: #444;
            }

            .documentation-link {
                font-family: "proxima-nova", "Helvetica Neue", sans-serif;
                position: fixed;
                bottom: 75px;
                left: 50%;
                width: 200px;
                margin-left: -100px;
                text-align: center;
                font-size: 16px;
            }

            .documentation-link, .documentation-link:link, .documentation-link:visited {
                color: #000;
                text-decoration: none;
            }

            .documentation-link:hover {
                text-decoration: underline;
                color: #000;
            }

            #retweet_button, credits, .documentation-link {
                transition: opacity 200ms;
                opacity: 1;
                z-index: 99;
                point-events: all;
            }

            body.demo-start #retweet_button, body.demo-start credits, body.demo-start .documentation-link,
            body.page-intro #retweet_button, body.page-intro credits, body.page-intro .documentation-link {
                opacity: 0;
                pointer-events: none;
            }
        </style>

        <!-- Share -->
        <div id="retweet_button">
            <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/vex/docs/welcome" data-text="Check out vex, a modern UI library for creating beautiful and functional dialogs." data-count="horizontal" data-via="HubSpotDev">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </div>

        <a class="documentation-link" href="http://github.hubspot.com/vex" target="_blank">
            vex Documentation
        </a>

        <credits>
            By <a href="http://dev.hubspot.com" target="_blank">HubSpot</a>
        </credits>

        <!-- Start of Async HubSpot Analytics Code -->
        <script type="text/javascript">
            (function(d,s,i,r) {
                if (d.getElementById(i)){return;}
                var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
                n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
                e.parentNode.insertBefore(n, e);
            })(document,"script","hs-analytics",300000);
        </script>
        <!-- End of Async HubSpot Analytics Code -->

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-45159009-1', 'hubspot.com');
            ga('send', 'pageview');
        </script>

        <!-- Force 3d acceleration always and forever :) -->
        <div style="-webkit-transform: translateZ(0)"></div>
    </body>
</html>
